<template>
  <div class="top">
    <todaySales />
    <todayOrders />
    <todayUsers />
    <totalUsers />
  </div>
</template>
<script lang="ts">
export default {

}
</script>
<script setup lang="ts">
import todayOrders from './todayOrders.vue'
import todaySales from './todaySales.vue'
import todayUsers from './todayUsers.vue'
import totalUsers from './totalUsers.vue'
import { onMounted } from 'vue';
import { useReportInfoData } from '@/stores/reportData'

const reportInfoData = useReportInfoData()
onMounted(() => {
  reportInfoData.getReportInfoData()
})
</script>

<style scoped>
.top {
  display: flex;
}

:deep(.footer) {
  font-size: 12px;
  color: #666;
}

:deep(.footer span) {
  font-weight: bold;
}

:deep(#order) {
  width: 100%;
  height: 50px;
}

:deep(#trade) {
  width: 100%;
  height: 50px;
}

:deep(#user) {
  width: 100%;
  height: 50px;
}
</style>